<%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%@ include file="../include/taglib.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<%@ include file="../include/jsCss.jsp" %>
  	 <link rel="stylesheet" href="${webUrl }/css/tree/zTreeStyle/zTreeStyle.css" type="text/css">  
     <script type="text/javascript" src="${webUrl }/js/jquery.ztree.core-3.5.js"></script>  
     <script type="text/javascript" src="${webUrl }/js/jquery.ztree.excheck-3.5.js"></script>  
    <title>添加菜单权限</title> 
    	
  </head>
  
  <body> 
      <form action="role!roleAddPrivilegeSave.html" method="post" id="roleForm">
      	  <table border="1">
      	  	 <tr>
      	  		<td>角色</td>
      	  		<td>
      	  			<input type="hidden" name="roleId"  value="${roleId }"/>
      	  			${roleName}
      	  		</td>
      	  	 </tr>
      	  	 <tr>
      	  	 	<td>权限</td>
      	  	 	<td>
      	  	 		<div class="content_wrap">
      	  	 			<div class="zTreeDemoBackground left">
      	  	 				<ul id="roleTree" class="ztree" style="display: block;">
      	  	 				
      	  	 				</ul>
      	  	 			</div>
      	  	 		</div>
      	  	 		<input type="hidden" name="menuIds" id="menuIds"/>
      	  	 	</td>
      	  	 </tr>
      	  	 <tr>
      	  	 	<td colspan="2" style="text-align: center;"> 
      	  	 		<input type="submit" value="保存">
      	  	 	</td>
      	  	 </tr>
      	  </table>
      </form>
  </body>
</html>
<script type="text/javascript"> 
			var setting = {
				check: {
					enable: true,
					showLine: true
					
				},
				data: {
					simpleData: {
						enable: true
					}
				},callback: {
					beforeClick: beforeClick,
					onCheck: onCheck
				} 
			};
			
			function beforeClick(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("roleTree");
				zTree.checkNode(treeNode, !treeNode.checked, null, true);
				return false;
			} 
			function onCheck(e, treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("roleTree"),
				nodes = zTree.getCheckedNodes(true),
				v = "";
				for (var i=0, l=nodes.length; i<l; i++) {
					v += nodes[i].id + ",";
				}
				if (v.length > 0 ){ 
					v = v.substring(0, v.length-1);
				}
				alert(v);
				$("#menuIds").val(v);
				//cityObj.attr("value", v);
			} 
			var zNodes =${jsonString};
			
			$(document).ready(function(){
				$.fn.zTree.init($("#roleTree"), setting, zNodes);
			}); 
	</script>